import render_helper from "./render_helper.mjs";
import render_content from "./render_content.mjs";
import ajax from "./thin_ajax.mjs";
import datarover from "./datarover.mjs";
import { nearest_datacontainer } from "./nearest.mjs";
import { thin } from "../thin3.mjs";
import { after, clearafterqueue } from "./delay_render.mjs";

export default function (container, template) {
  // console.log({ container, template });
  let select = document.createElement("select");
  select.name = template.select;
  select.id = template.select;
  container.appendChild(select);

  if (template.ajax) {
    if (template.ajax.watch) {
      let data_container = nearest_datacontainer(select);
      let watched = data_container.querySelector(template.ajax.watch);
      console.log({ data_container, watched });
      watched.addEventListener("change", (e) => {
        console.log(e);
        after(renderoptions);
        setTimeout(clearafterqueue, 20);
      });
    }

    function renderoptions() {
      let query = {};

      for (let item in template.ajax.query) {
        // console.log(item);
        if (typeof template.ajax.query[item] === "string") {
          query[item] = render_content(select, template.ajax.query[item]);
        }
      }
      // console.log({ query });
      // console.log({ template, query });
      ajax({
        url: template.ajax.url,
        type: template.ajax.method || "post",
        contentType: "application/JSON",
        // data: template.ajax.query,
        data: query,
        success: ajax_render,
      });
    }
    renderoptions();
  } else {
    render();
  }

  function ajax_render(data) {
    thin(select).empty();
    select.options.add(new Option(""));
    let opt = datarover(data, template.ajax.datapath);
    // console.log(opt);
    if (Array.isArray(opt)) {
      opt.forEach((op) => {
        // select.options.add(new Option());
        let value = /\[\[[\w/.]+\]\]/.test(template.ajax.value)
          ? render_content(op, template.ajax.value)
          : datarover(op, template.ajax.value);
        let text = render_content(
          op,
          template.ajax.text || template.ajax.value
        );
        select.options.add(new Option(text, value));
      });
    }
    // console.log({ select, template });
    render_helper(select, template);
  }

  function render() {
    if (template.options) {
      if (typeof template.options === "string") {
        let opt = datarover(select, template.options);
        if (Array.isArray(opt)) {
          opt.forEach((op) => {
            select.options.add(new Option(op));
          });
        }
      } else if (Array.isArray(template.options)) {
        template.options.forEach((op) => {
          select.options.add(new Option(op));
        });
      } else if (typeof template.options === "object") {
        if (Array.isArray(template.options.data)) {
          template.options.data.forEach((row) => {
            let opt = new Option(
              render_content(
                row,
                template.options.text || template.options.value
              ),
              render_content(row, template.options.value)
            );
            select.options.add(opt);
          });
        } else {
          for (let op in template.options) {
            select.options.add(new Option(template.options[op], op));
          }
        }
      }
    }
    // render_helper(select, template);
    render_helper(select, template);
  }
}
